<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            font-size: 15px;
        }
        .top1{
            background-color: #F5F5F5;
            border-bottom:1px solid #EEE ;
            width: 100%;
        }
        .top2{
            height: 35px;
            width: 1190px;
            margin: auto;
            line-height: 35px;
        }
        .t1>li{
            list-style: none;
            display:inline-block
        }
        .t2>li{
            list-style: none;
            display:inline-block
        }
        a{
            text-decoration: none;
            color: #6C6C6C;
        }
        a:hover{
            color: #F22E00;
        }
        .tea{
            color: #F22E00;
            margin-left: 5px;
        }
        .lib{
            margin-left: 15px;
        }
        .t1 {
            float: left;
        }
        .t2{
            float: right;
        }
        .t2>li{
            list-style: none;
            display: inline-block;
            
            
        }
        .xialk{
            margin-left: 8px;
        }
        .t1 li ul{
            position: absolute;
            display: block;
            float: left;
            background-color: #ffffff;
            display: none;
            z-index: 10;
        }
        .t2 li ul{
            position: absolute;
            display: block;
            float: left;
            background-color: #ffffff;
            display: none;
            z-index: 10;
        }
        .t1 li ul li {
            height: 30px;
            width: 100px;
            list-style: none;
            
        }
        .t2 li ul li {
            height: 30px;
            width: 100px;
            list-style: none;
            
        }
        .t1 li:hover ul{
            display:block
        }
        .t2 li:hover ul{
            display:block
        }
       .t1 li:hover{
        background-color: #ffffff;
       }
       .t2 li:hover{
        background-color: #ffffff;
       }
        .t1 li ul li a:hover{
            background-color: #F4F4F4;
        }
        .t2 li ul li a:hover{
            background-color: #F4F4F4;
        }
        .dak{
            background-color: #E8E8EA;
            height: 670px;
            width: 1300px;
            margin: auto;
            position: relative;
        }
        .main1{
            width: 1220px;
            height: 120px;
            margin-left: 20px;
            position: relative;
            
        }
        .main2{
            width: 1220px;
            height: 800px;
            background-color: rgb(255, 255, 255);
            margin-left: 20px;
            border-radius: 18px 18px 0px 0px;
        }
        .main1-t{
            position: relative;
            top: 25px;
        }
        .a1,.a2{
            float: left;
        }
        .a1{
            margin-left: 20px;
        }
        .a2{
            margin-left: 120px;
        }
        .a3{
            float: left;
            background-color: #fff;
            width: 76px;
            height: 90px;
            margin-top: -10px;
            margin-left: 150px;
        }        
        .a2-t{
            border-radius: 20px;
            border: 1px solid #ff5000;;
            width: 625px;
            height: 40px;
           
        }
        .a2-t-1{
            line-height: 40px;
            margin-left: 20px;
            border-right: 1px solid #d6d6d6;
            height: 40px;
            width: 60px;
            float: left;
        }
        .a2-t-2{
            line-height: 40px;
            margin-left: 10px;
            height: 40px;
            width: 405px;
            float: left;
            position: relative;
        }
        .int{
            background-image: url(img/搜索.svg);
            border: 0px;
            height: 30px;
            background-repeat:no-repeat ;
            background-position: 3px 3px;
            background-color: #E8E8EA;
            width: 405px;
            outline:none
        }
        .a2-t-2-1{
            position: absolute;
            left: 100%;
            top: 5px;
        }
        .lieb2 li{
            list-style: none;
            display: block;
            float: left;
            margin-left: 10px;
        }
        .a2-t-3{
            background-color: #FF6D00;
            border-radius: 20px;
            float: right;
            height: 30px;
            width: 70px;
            text-align: center;
            line-height: 30px;
            margin-top: 5px;
            margin-right: 5px;
        }
        
        .a3-t{
            color: rgb(255, 0, 0);
            text-align: center;
        }
        .a3-w{
            text-align: center;
        }
        .mtou{
            height: 36px;
            line-height: 36px;
          
        }
        h2{
            margin-left: 70px;
            float: left;
        }
        .lieb3{
            float: left;
            margin-left: 120px;
        }
        .lieb3 li{
            list-style: none;
            display: block;
            float: left;
            margin-left: 10px;
        }
        .lieb4 li{
            list-style: none;
            font-size: 12px;
            height: 34.5px;
            letter-spacing: 2px;
            line-height: 34px;
        }
        .lieb4 li:hover{
            background-color:#FFE4DC ;
        }
        .b1{
            width: 200px;
            height: 530px;
            margin-left: 10px;
            float: left;
        }
        .b2{
            float: left;
            width: 500px;
            margin-left: 15px;
        }
        .b2-t{
            width: 500px;
            height: 280px;
            border-radius: 10px;
            background-image: url(img/大图1.jpg);
            position: relative;
        }
        .b2-z{
            height: 30px;
            line-height: 30px;
            width: 500px;
        }
        .b2-w{
            background-color: #E8E8EA;
            height: 200px;
            border-radius: 10px;
        }
        
        .b2-w-z{
            float: left;
            margin-left: 5px;
        }
        .b2-w-y{
            float: right;
            margin-right: 5px;
        }
        .tuoy{
            border-radius: 10px;
            margin-top: 10px;
        }
        .b3{
            width: 160px;
            float: left;
            margin-left: 10px;
        }
        .b3-t{
             height: 280px;
           
        }
        .b3-z{
            height: 30px;
            line-height: 30px;
        }
        .b4{
            width: 300px;
            float: left;
            margin-left: 15px;
        }
        .b4-t{
            text-align: center;
            background-image: url(img/背景图.png);
            background-repeat: no-repeat;
        }
        .b4-t-1{
            margin-top: 10px;
        }
        .tub1{
            background: url(img/图标.png);
            display: block;
            height: 16px;
            width: 16px;
            background-position: 0 -572.5px;
            float: left;
            
        }
        .tub2{
            background: url(img/图标.png);
            display: block;
            height: 16px;
            width: 16px;
            background-position: 0 -527.5px;
            float: left;
        }
        .yangs{
            display: block;
            float: left;
        }
        .b4-t-3{
           width: 300px;
           height: 17px;
           
        }
        .b4-t-3 a{
            color: #ff5000;
        }
        .b4-t-3-1{
           
            background-color: #ffe4db;
            width: 112px;
            height: 18px;
            border-radius: 20px;
            float: left;
            margin-left: 30px;
        }
        .b4-t-3-2{
            
            background-color: #ffe4db;
            width: 98px;
            height: 18px;
            border-radius: 20px;
            float: left;
            margin-left: 10px;
        }
        .b4-t-4{
            width: 300px;
            height: 40px;
            margin-top: 15px;
        }
        .b4-t-4-1{
            background-color:#ff6f06 ;
            float: left;
            
            text-align: center;
            width: 90px;
            height: 28px;
            margin-left: 8px;
            border-radius: 6px;
            line-height: 30px;
        }
        .b4-t-4-1 a{
            color: rgb(255, 255, 255);
        }
        .b4-t-6{
            width: 300px;
            height: 77px;
            margin-top: -10px;
        }
        .b4-t-6 li{
            
            display: block;
            float: left;
            list-style: none;
            margin-left: 25px;
            margin-top: 10px;
        }
        .b4-t-6 a{
            color: #000;
        }
        .b4-t-6-2 li{
            
            display: block;
            float: left;
            list-style: none;
            margin-left: 50px;
            margin-top: 10px;
        }
        
        .b4 a:hover{
            color: #F22E00;
        }
        .b4-w-1{
            width: 300px;
            height: 154px;
            margin-top: -5px;
        }
        .b4-w-1 li{
            border: 1px #E8E8EA solid;
            display: block;
            float: left;
            height: 77px;
            width: 72px;
            text-align: center;
            
        }
        .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8{
            background: url(img/图标.png);
            display: block;
            height: 24px;
            width: 24px;
            background-position: 0 0px;
            margin: auto;
            margin-top: 13px;
            margin-bottom: 8px;
        }
        .c2{
            background-position: 0 -88px;
        }
        .c3{
            background-position: 0 -44px;
        }
        .c4{
            background-position: 0 -132px;
        }
        .c5{
            background-position: 0 -220px;
        }
        .c6{
            background-position: 0 -264px;
        }
        .c7{
            background-position: 0 -308px;
        }
        .c8{
            background-position: 0 -352px;
        }
        
        .b4-w-1 a{
            color: #000;
        }
        .b4-w-3 li{
            list-style: none;
            display: block;
            float: left;
            margin-left: 20px;
        }
        .b4-w-2{
            height: 25px;
            width: 300px;
            margin-top: 12px;
        }
        .b4-w-3{
            width: 300px;
            height: 32px;
        }
        .b2-t-1{
            font-size: 20px;
            width: 20px;
            height: 30px;
            background-color: rgb(0, 0, 0,60%);
            border-radius:0px 16px 16px 0px ;
            color: rgb(255, 255, 255);
            text-align: left;
            position: relative;
            top: 45%;
            display: none;
        }
        .b2-t-2{
            font-size: 20px;
            width: 20px;
            height: 30px;
            background-color: rgb(0, 0, 0,60%);
            color: rgb(255, 255, 255);
            border-radius:16px 0px 0px 16px ;
            text-align: right;
            position: relative;
            float: right;
            top:35%;
            display: none;
        }
        .b2-t a{
            color: rgb(255, 255, 255);
        }
        .b2-t-3{
            position: absolute;
            top: 80%;
            left: 40%;
            background-color: rgb(255, 255, 255,40%);
            height: 20px;
            width: 150px;
            border-radius: 20px;
        }
        .b2-t-3 li{
            list-style: none;
            display: block;
            float: left;
            height: 30px;
            width:25px;      
            margin-top: -28px;
            
        }
        .b2-t-3 ul{
            margin-left: 15px;
        }
        .b2-t-3 a{
            color: rgb(255, 255, 255);
            font-size: 40px;

        }
        .pinz{
            position: absolute;
            left: 95%;
            margin-left:10px;
            top: 35%;
            border-radius: 10px;
        }
        .pinz li{
            list-style: none;
            width: 40px;
            height: 40px;
            background-color: rgb(255, 255, 255);
            text-align: center;
        }
        .pinz li a{
            color: rgb(0, 0, 0);
        }
        .niub{
            border-top: 1px solid #EEE;
            border-bottom: 1px solid #EEE;
            width: 80%;
            line-height: 40px;
            height: 37px;
            margin-left: 4px;
        }
        .pinz li:hover{
            background-color:#FF5F05 ;
        }
        .pinz li:hover a{
            color: rgb(255, 255, 255); ;
        }
    </style>
</head>
<body>
    
    <div class="top1">
        <div class="top2">
            <ul class="t1">
                <li>
                   
                        中国大陆<iframe class="xialk" src="img\下拉1.svg" frameborder="0" height="10px" width="10px"></iframe>
                  
                  
                    <ul>
                        <li><a href="">全球</a></li>
                        <li><a href="">中国大陆</a></li>
                        <li><a href="">中国香港</a></li>
                        <li><a href="">中国台湾</a></li>
                        <li><a href="">中国澳门</a></li>
                        <li><a href="">韩国</a></li>
                        <li><a href="">马拉西亚</a></li>
                    </ul>
                    
                </li>
                <li><a href="" class="tea">亲，请登录</a> <a href="taobsy.html">免费注册</a></li>
                <li class='lib'><a href="">手机逛淘宝</a></li>
            </ul>
            <ul class="t2">
                <li><a href="" class="tea">我的淘宝</a><iframe class="xialk" src="img\下拉1.svg" frameborder="0" height="10px" width="10px"></iframe>
                    <ul>
                        <li><a href="">已买到的宝贝</a></li>
                        <li><a href="">我的足迹</a></li>
                       
                    </ul>
                </li>
                <li class='lib'><a href=""><iframe class="" src="img/购物车.svg" frameborder="0" height="14px" width="14px"></iframe>购物车</a><iframe class="xialk" src="img\下拉1.svg" frameborder="0" height="10px" width="10px"></iframe>
                </li>
                <li class='lib'><a href=""><iframe class="" src="img/收 藏.svg" frameborder="0" height="14px" width="14px"></iframe>收藏夹</a><iframe class="xialk" src="img\下拉1.svg" frameborder="0" height="10px" width="10px"></iframe>
                    <ul>
                        <li><a href="">收藏的宝贝</a></li>
                        <li><a href="">收藏的店铺</a></li>
                       
                    </ul>
                </li>
                <li class='lib'><a href="">商品分类</a></li>
                <li class='lib'><a href="">免费开店</a></li>
                <li class='lib'><a href="">千牛卖家中心</a><iframe class="xialk" src="img\下拉1.svg" frameborder="0" height="10px" width="10px"></iframe>
                    
                    <ul>
                        <li><a href="">免费开店</a></li>
                        <li><a href="">卖出的宝贝</a></li>
                        <li><a href="">出售的宝贝</a></li>
                        <li><a href="">卖家服务市场</a></li>
                        <li><a href="">买家培训中心</a></li>
                        <li><a href="">体检中心</a></li>
                        <li><a href="">问商友</a></li>
                    </ul>
                </li>
                <li class='lib'><a href="">联系客服</a><iframe class="xialk" src="img\下拉1.svg" frameborder="0" height="10px" width="10px"></iframe>
                    <ul>
                        <li><a href="">消费者客户</a></li>
                        <li><a href="">商家服务大厅</a></li>
                       
                    </ul>
                </li>
                <li class='lib'><a href="">网站导航</a><iframe class="xialk" src="img\下拉1.svg" frameborder="0" height="10px" width="10px"></iframe>
                    <ul>
                        <li><a href="">世界和平</a></li>
                        <li><a href="">宇宙和平</a></li>
                        <li><a href="">百世十载一宿</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="dak">
        <div class="pinz">
            <ul>
                <li style="background-color:#FF5F05 ; color: rgb(255, 255, 255);"><a href="" style="color: rgb(255, 255, 255);">品质好货</a></li>
                <li><a href="">次你喜欢</a></li>
                <li><a href=""><div class="niub">反馈</div></a></li>
                <li><a href="">暴恐举报</a></li>
            </ul>
            
        </div>
        <div class="main1">
            <div class="main1-t">
            <div class="a1">
                <img src="img\淘宝.png" alt="">
            </div>
            <div class="a2">
                <div class="a2-t">
                    <div class="a2-t-1">
                        宝贝<iframe class="xialk" src="img\下拉1.svg" frameborder="0" height="10px" width="10px"></iframe>
                    </div>
                    <div class="a2-t-2">
                        <input type="text" placeholder="      诺优能3段" class="int">
                        <div class="a2-t-2-1">
                            <iframe class="zhaoxj" src="img\照相机.svg" frameborder="0" height="36px" width="36px" ></iframe>
                         </div>
                    </div>
                    <div class="a2-t-3">
                        <font color="#fff"><b>搜索</b></font>
                    </div>
                </div>
                <div class="a2-w">
                    <ul class="lieb2">
                        <li><a href="">新款连衣裙</a></li>
                        <li><a href="">四件套</a></li>
                        <li><a href=""><font color="#F22E00">潮流T恤</font></a></li>
                        <li><a href="">时尚女鞋</a></li>
                        <li><a href="">短裤</a></li>
                        <li><a href="">半身裙</a></li>
                        <li><a href="">男士外套</a></li>
                        <li><a href="">墙纸</a></li>
                        <li><a href="">行车记录仪</a></li>
                    </ul>
                </div>
            </div>
            <div class="a3">
                <div class="a3-t">
                    去领红包
                </div>
                <div class="a3-w">
                    <img src="img/二维码.png" alt="" height="62px">
                </div>
            </div>
            </div>
        </div>
        <div class="main2">
            <div class="mtou">
                <h2><font color="#FF6200">主体市场</font></h2>
                <ul class="lieb3">
                    <li><a href=""><font color="#FF0036"><b>天猫</b></font></a></li>
                        <li><a href=""><font color="#FF0036"><b>聚划算</b></font></a></li>
                        <li><a href="" style="color:green;"><b>天猫市场</b></a></li>
                        <li>|</li>
                        <li><a href="">司法拍卖</a></li>
                        <li><a href="">飞猪旅行</a></li>
                        <li><a href="">天天特卖</a></li>
                        <li><a href="">淘小铺</a></li>
                        <li>|</li>
                        <li><a href="">造点新货</a></li>
                        <li><a href="">苏宁易购</a></li>
                        <li><a href="">淘宝心选</a></li>
                        <li><a href="">智能生活</a></li>
                </ul>
            </div>
            <div class="b1">
                <ul class="lieb4">
                    <li style="margin-top: 0px;"><a href="">女装</a> / <a href="">内衣</a> / <a href="">家具</a><span style="float: right;">></span></li>
                    <li><a href="">女童</a> / <a href="">男鞋</a> / <a href="">箱包</a><span style="float: right;">></span></li>
                    <li><a href="">母婴</a> / <a href="">童装</a> / <a href="">玩具</a><span style="float: right;">></span></li>
                    <li><a href="">男装</a> / <a href="">运动户外</a><span style="float: right;">></span></li>
                    <li><a href="">美妆</a> / <a href="">彩妆</a> / <a href="">个护</a><span style="float: right;">></span></li>
                    <li><a href="">手机</a> / <a href="">数码</a> / <a href="">企业</a><span style="float: right;">></span></li>
                    <li><a href="">大家电</a> / <a href="">生活电器</a><span style="float: right;">></span></li>
                    <li><a href="">零食</a> / <a href="">生鲜</a> / <a href="">茶酒</a><span style="float: right;">></span></li>
                    <li><a href="">厨具</a> / <a href="">收纳</a> / <a href="">清洁</a><span style="float: right;">></span></li>
                    <li><a href="">家纺</a> / <a href="">家饰</a> / <a href="">鲜花</a><span style="float: right;">></span></li>
                    <li><a href="">图书音像</a> / <a href="">文具</a><span style="float: right;">></span></li>
                    <li><a href="">医药保健</a> / <a href="">进口</a><span style="float: right;">></span></li>
                    <li><a href="">汽车</a> / <a href="">二手车</a> / <a href="">用品</a><span style="float: right;">></span></li>
                    <li><a href="">房产</a> / <a href="">装饰家具</a> / <a href="">建材</a><span style="float: right;">></span></li>
                    <li><a href="">手表</a> / <a href="">眼镜</a> / <a href="">珠宝饰品</a><span style="float: right;">></span></li>
                </ul>
            </div>
            <div class="b2">
                <div class="b2-t">
                    <div class="b2-t-1"><a href="#"><</a>
                    </div>
                    <div class="b2-t-2">
                        <a href="#">></a>
                    </div>
                    <div class="b2-t-3">
                        <ul>
                           <li><a href="">.</a></li>
                           <li><a href="">.</a></li>
                           <li><a href="">.</a></li>
                           <li><a href="">.</a></li>
                           <li><a href="">.</a></li>
                        </ul>
                    </div>
                </div>
                <div class="b2-z">
                    <font color="#FF0036"><b>TMALL天猫</b></font> <font color="#6C6C6C">理想生活天猫</font> <span style="float: right;"><font color="red">1</font>/5</span>
                </div>
                <div class="b2-w">
                    <div class="b2-w-z">
                        <img class="tuoy" src="img/中图1.jpg" alt="">
                    </div>
                    <div class="b2-w-y">
                        <img class="tuoy" src="img/中图2.jpg" alt="">
                    </div>
                </div>
            </div>
            
            <div class="b3">
                <div class="b3-t"><img style="border-radius: 10px;" src="img/小图1.webp" alt=""></div>
                <div class="b3-z"><font color="#6C6C6C">今日热卖</font></div>
                <div class="b3-w"><img style="border-radius: 10px;" src="img/小图2.jpg" alt=""></div>
            </div>
            <div class="b4">
                <div class="b4-t">
                    <div class="b4-t-1"><img src="img/头像.jpg" alt="" style="border-radius: 50%;"></div>
                    <div class="b4-t-2">Hi!你好</div>
                    <div class="b4-t-3">
                    <div class="b4-t-3-1"><span class="tub1"></span><span class="yangs"><a href="">领淘金币抵钱</a></span></div>
                    <div class="b4-t-3-2"><span class="tub2"></span><span class="yangs"><a href="">会员俱乐部</a></span></div>
                    </div>
                    <div class="b4-t-4">
                        <div class="b4-t-4-1"><a href="">登录</a></div>
                        <div class="b4-t-4-1"><a href="">注册</a></div>
                        <div class="b4-t-4-1"><a href="">开店</a></div>
                    </div>
                    <div class="b4-t-5"><img src="img/逛逛.jpg" alt="" width="300px"></div>
                </div>
                <div class="b4-t-6">
                <div class="b4-t-6-1">
                    <ul>
                        <li><a href="">公告</a></li>
                        <li><a href="">规则</a></li>
                        <li><a href="">安全</a></li>
                        <li><a href="">公益</a></li>
                        <li><a href="">牛牛</a></li>
                    </ul>
                </div>
                <div class="b4-t-6-2">
                    <ul>
                        <li><a href="">千牛头条</a></li>
                        <li><a href="">新手开店</a></li>
                    </ul>
                </div>
                </div>
                <div class="b4-w-1">
                    <ul>
                        <li><span class="c1"></span><a href="">充话费</a></li>
                        <li><span class="c2"></span><a href="">旅行</a></li>
                        <li><span class="c3"></span><a href="">车险</a></li>
                        <li><span class="c4"></span><a href="">游戏</a></li>
                        <li><span class="c5"></span><a href="">彩票</a></li>
                        <li><span class="c6"></span><a href="">电影</a></li>
                        <li><span class="c7"></span><a href="">酒店</a></li>
                        <li><span class="c8"></span><a href="">理财</a></li>
                    </ul>
                </div>
                <div class="b4-w-2">阿里APP<span style="float: right;"><a href="">更多></a></span></div>
                <div class="b4-w-3">
                    <ul>
                        <li><a href=""><img src="img/小图标1.webp" alt=""></a></li>
                        <li><a href=""><img src="img/小图标2.webp" alt="" width="32px"></a></li>
                        <li><a href=""><img src="img/小图标3.webp" alt="" width="32px"></a></li>
                        <li><a href=""><img src="img/小图标4.webp" alt="" width="32px"></a></li>
                        <li><a href=""><img src="img/小图标5.webp" alt="" width="32px"></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        var b1=document.querySelector(".b2-t-1")
        var b2=document.querySelector(".b2-t-2")
        var b3=document.querySelector(".b2-t")
        var i=0
        var tingz
        var b4=document.querySelector(".a3-w")
        var b5=document.querySelector(".a3-t")
        b5.onclick=function(){
            b4.style.display="none"
        }
        b3.onmouseover=function(){
            b1.style.display="block"
            b2.style.display="block"
            clearInterval(tingz)
        }
        b1.onclick=function(){
            i=i-1
            if(i<1){
                i=5}
            b3.style.backgroundImage="url(img/大图"+i+".jpg)"
            
        }
        b2.onclick=function(){
            i=i+1
            if(i>4){
                i=1}
            b3.style.backgroundImage="url(img/大图"+i+".jpg)"
            
        }
        b3.onmouseout=function(){
            b1.style.display="none"
            b2.style.display="none"
            kais()
        }
        var kais=function(){
        tingz=setInterval(function(){
            i=i+1
            if(i>5){
                i=1}
            b3.style.backgroundImage="url(img/大图"+i+".jpg)"
            
        },2000)
    }
        
    </script>
</body>
</html>